import Taro, {Component} from '@tarojs/taro'
import { View } from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'

interface IProps {
  list: Array<Object>
  current: number
  onClick: Function
  className: string
}

export default class TabList extends Component<IProps, {}> {
  state: any
  props: any
  static options = {
    addGlobalClass: true
  }

  constructor(props) {
    super(...arguments)
    // this.setState({
    //   tabKey: props.current || 0
    // })
    this.state = {
      tabKey: props.current || 0
    }
  }

  //  切换tab
  onSwitchTab(k, tab) {
    const { onClick } = this.props
    this.setState({
      tabKey: k
    })
    if (onClick) {
      onClick(k, tab)
    }
  }

  render() {
    const { list=[], className } = this.props
    const { tabKey } = this.state
    return (<View className={classNames('tab-list', className)}>
      {list.map((tab, k) => {
        return (<View key={k} className={classNames('tab-list__item f-g-5', tabKey === k && 'type-item--active')} onClick={this.onSwitchTab.bind(this, k, tab)}>{tab.title}</View>)
      })}
    </View>)
  }
}
